<template>
  <div class="table w-full">
    <el-table
    :data="tableData"
    :stripe="tableTitle.stripe"
    style="width: 100%; height: 500px; overflow: auto;">
    <!-- x轴没设置好 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
      <el-table-column
        v-if="tableTitle.selection"
        type="selection"
        width="55"
        align="center"
        >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableTitle.head"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        align="center"
        :show-overflow-tooltip="item.overflow"
        >
        <template slot-scope="scope">
          <span v-if="item.type === 'text'" style="color: coral;">
            {{ item.filter ? item.filter(scope.row) : scope.row[item.prop] }}
          </span>
          <!-- 状态 -->
          <div v-if="item.type === 'switch'">
            <el-switch
              v-model="scope.row[item.prop]"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="item.onChange && item.onChange($event, scope)"
              >
            </el-switch>
          </div>
          <div v-if="item.type === 'btn'">
            <el-button
              v-for="(btn, index) in item.btn"
              :key="index"
              :type="btn.type || 'primary'"
              :icon="btn.icon"
              @click="btn.handlerClick && btn.handlerClick(scope)"
              >
              {{ btn.name }}
          </el-button>
          </div>
        </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script>
/**
 * 1. 渲染的数据
 * 2. 表头
 * 3. 内容自定义
 *  - 按钮
 *  - 图片
 *  - input
 *  - switch
 *  - ...
 */
/**
 * 性别
 *  - 代码通用性
 *  - 用户随意传参数 展示对应的内容
 */
export default {
  name: 'bdTable',
  components: {
  },
  props: {
    // 渲染的数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 表头
    tableTitle: {
      type: [Array, Object],
      require: true
    }
  },
  data () {
    return {
      // tableData: []
      value: ''
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () { },
  methods: {}
}
</script>
<style lang="scss" scoped>
</style>
